<template>
	<div class="app-container">
		<!-- 搜索区域 -->
		<el-form :model="query" ref="queryForm" :inline="true">
			<el-form-item label="标题" prop="title">
				<el-input v-model="query.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleQuery">搜索</el-button>
				<el-button @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 表格区域 -->
		<el-table v-loading="loading" :data="discussionList" style="width: 100%" border height="500px">
			<el-table-column label="标题" prop="title" />
			<el-table-column label="用户" prop="userName" width="120" />
			<el-table-column label="内容" prop="content" show-overflow-tooltip />
      <!-- 视频 -->
      <el-table-column label="视频" prop="videoUrl" width="200" align="center">
        <template #default="scope">
          <video style="width: 100%;height: 100px;" :src="baseUrl + scope.row.videoUrl" controls />
        </template>
      </el-table-column>
			<el-table-column label="点赞数" prop="likes" width="100" />
			<el-table-column label="浏览量" prop="views" width="100" />
			<el-table-column label="发布时间" prop="postDate" width="180">
				<template #default="scope">
					{{ parseTime(scope.row.postDate) }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120" align="center">
				<template #default="scope">
					<el-button type="danger" @click="deleteDiscussion(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<pagination v-show="total > 0" :total="total" v-model:page="query.pageNum" v-model:limit="query.pageSize" @pagination="getDiscussionList" />
	</div>
</template>

<script>
import { getDiscussionList,deleteDiscussion } from "@/api/lv/dt";
import { parseTime } from "@/utils/ruoyi";

export default {
	data() {
		return {
			discussionList: [],
			total: 0,
			query: {
				pageNum: 1,
				pageSize: 10,
				title: ""
			},
			loading: false,
			baseUrl: process.env.VUE_APP_BASE_API,

		};
	},
	mounted() {
		this.getDiscussionList();
	},
	methods: {
		getDiscussionList() {
			this.loading = true;
			getDiscussionList(this.query)
				.then((res) => {
					this.discussionList = res.data.records;
					this.total = res.data.total;
					console.log(this.discussionList);
				})
				.catch((error) => {
					console.error("获取数据失败:", error);
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleQuery() {
			this.query.pageNum = 1;
			this.getDiscussionList();
		},
		resetQuery() {
			this.$refs["queryForm"].resetFields();
			this.handleQuery();
		},
		deleteDiscussion(id) {
			deleteDiscussion(id)
				.then((res) => {
					this.getDiscussionList();
				})
				.catch((error) => {
					console.error("删除失败:", error);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-container {
	padding: 20px;
}
</style>
